<template>
  <div class="container">
    <!-- 试题预览对话框 -->
    <el-dialog
      :visible='showDialog'
      title="题目预览"
      @close='btnCancel'
    >
      <!-- <el-table>
        <el-table-column label="【题型】:"></el-table-column>
        <el-table-column label="【编号】:"></el-table-column>
        <el-table-column label="【编号】:"></el-table-column>
        <el-table-column label="【编号】:"></el-table-column>
        <el-table-column label="【编号】:"></el-table-column>
        <el-table-column label="【编号】:"></el-table-column>
        <el-table-column label="【编号】:"></el-table-column>
      </el-table> -->
      <div>
        <el-row
          type="flex"
          justify="flex-start"
          class="questions-preview"
        >
          <el-col>
            <span>【题型】:{{obj.questionType|questionTypeFilter}}</span>
          </el-col>
          <el-col>
            <span>【编号】:{{obj.id}}</span>
          </el-col>
          <el-col>
            <span>【难度】:{{obj.difficulty|difFilter}}</span>
          </el-col>
          <el-col>
            <span>【标签】:{{obj.tags}}</span>
          </el-col>
          <el-col>
            <span>【学科】:{{obj.subjectName}}</span>
          </el-col>
          <el-col>
            <span>【目录】:{{obj.directoryName}}</span>
          </el-col>
          <el-col>
            <span>【方向】:{{obj.direction}}</span>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="flex-start"
          class="questions-preview"
        >
        </el-row>
      </div>
      <hr />
      <span>【题干】：</span>
      <div
        v-html="obj.question"
        style="color: blue;"
      ></div>
      <p v-if="obj.questionType==='1'">"单选题
        选项：（以下选中的选项为正确答案）"</p>
      <p v-else-if="obj.questionType==='2'">"多选题 选项：（以下选中的选项为正确答案）"</p>
      <el-row
        type="flex"
        v-if="obj.questionType==='1'||obj.questionType==='2'"
        class="father"
      >
        <el-radio
          v-for="(item,index) in obj.options"
          :key='index'
          :value="radio"
          :label="item.isRight"
          class="children"
        >
          {{item.title}}
        </el-radio>
      </el-row>
      <hr />
      <span>【参考答案】：</span>
      <el-button
        type="danger"
        size="small"
        @click="videoShow=true"
      >
        <span>视频答案预览</span>
      </el-button>
      <div
        class="videoShow"
        v-show="videoShow"
      >
        <video
          :src="obj.videoURL"
          controls="controls"
          ref="vueRef"
        >
          您的浏览器不支持 video 标签。
        </video>
      </div>
      <hr />
      <span>【答案解析】：{{obj.answerID}}</span>
      <hr />
      <span>【题目备注】：{{obj.remarks}}</span>
      <el-row
        slot="footer"
        type="flex"
        justify="end"
      >
        <el-button
          type="primary"
          @click="btnCancel"
        >关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  // 组件名称
  name: 'QuestionsPreview',
  // 局部注册的组件
  components: {},
  filters: {
    // 题型过滤器
    questionTypeFilter: function (key) {
      const newQuestionType = questionType.find(item => item.value.toString() === key)
      return newQuestionType ? newQuestionType.label : '未知'
    },
    // 难度过滤器
    difFilter: function (key) {
      const newDifFilter = difficulty.find(item => item.value.toString() === key)
      return newDifFilter ? newDifFilter.label : '未知'
    }
    // // 学科过滤器
    // subjectFilter: function () {

    // }
  },
  // 组件参数 接收来自父组件的数据
  props: {
    showDialog: {
      type: Boolean,
      required: true
    }
  },
  // 组件状态值
  data () {
    return {
      // 接收数据回写
      obj: {
        questionType: '',
        options: []
      },
      // isRight跟v-model='radio'一样为1的被选中
      radio: 1,
      // 点击播放显示视频
      videoShow: false
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 弹层打开回写数据
    async detail (id) {
      console.log(id)
      const data = await detail({ id: id })
      console.log(data)
      this.obj = data.data
      // this.obj.options.find(item => item.isRight)
    },

    // 点击播放视频
    playVideo () {

    },
    // 点击关闭弹层
    btnCancel () {
      // 清空数据
      this.obj = {}
      // 视频窗口关闭
      this.videoShow = false
      // 弹层关闭视频播放停止
      this.$refs.vueRef.pause()
      // 关闭弹层
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style >
.el-dialog {
  width: 900px;
}
.questions-preview {
  flex-flow: row wrap;
}
.questions-preview .el-col {
  margin: 10px 0;
  flex: 0 0 25%;
}
.father {
  flex-direction: row;
  flex-direction: column;
}
.father .children {
  padding: 8px 0;
}
.videoShow {
  width: 400px;
  height: 300px;
}
.videoShow video {
  width: 100%;
  height: 100%;
}
</style>
